<template>
  <j-modal
    :title='title'
    :width='1000'
    :visible='visible'
    :confirmLoading='confirmLoading'
    switchFullscreen
    @ok='handleOk'
    @cancel='handleCancel'
    cancelText='关闭'>
    <a-spin :spinning='confirmLoading'>
      <a-form :form='form'>
        <a-row :gutter='24'>
          <a-divider orientation='left'>基础信息</a-divider>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='订单编号:'
			  required='true'
               >
			 <!-- <a-input style='width: 100%' :disabled='disableSubmit' placeholder='分类名称'
			           v-decorator="['classifyName', validatorRules.classifyName]" /> -->
              <a-input placeholder='请输入'  v-decorator="['']" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='经销商编号:'

			  required='true'
			  >
              <a-input placeholder='请输入'  v-decorator="['']" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='经销商名称:'
			  required='true'
              >
              <a-input placeholder='请输入'  v-decorator="['']" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='配送商编号:'
			  required='true'
              >
              <a-input placeholder='请输入'  v-decorator="['']" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='配送商名称:'
			  required='true'
              >
              <a-input placeholder='请输入'  v-decorator="['']" />
            </a-form-item>
          </a-col>
		  <a-col :md='8' :sm='24'>
		    <a-form-item
		      :labelCol='labelCol'
		      :wrapperCol='wrapperCol'
		      label='收货地址:'
			  required='true'
		      >
		      <a-input placeholder='请输入'  v-decorator="['']" />
		    </a-form-item>
		  </a-col>
		  <a-col :md='8' :sm='24'>
		    <a-form-item
		      :labelCol='labelCol'
		      :wrapperCol='wrapperCol'
		      label='联系信息:'
			  required='true'
		      >
		      <a-input placeholder='请输入'  v-decorator="['']" />
		    </a-form-item>
		  </a-col>
		  <a-col :md='8' :sm='24'>
		    <a-form-item
		      :labelCol='labelCol'
		      :wrapperCol='wrapperCol'
		      label='物流模式:'
			  required='true'
		      >
		      <a-input placeholder='请输入'  v-decorator="['']" />
		    </a-form-item>
		  </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item label='发货时间:' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-date-picker  format="YYYY-MM-DD" value-format="YYYY-MM-DD"  v-decorator="['']" style="width:100%"/>
            </a-form-item>
			<!-- <a-form-model-item label="发货时间">
			      <a-date-picker
			        v-model="form.date1"
			        show-time
			        type="date"
			        placeholder="Pick a date"
			        style="width: 100%;"
			      />
			    </a-form-model-item> -->
          </a-col>
		  <a-col :md='8' :sm='24'>
		    <a-form-item
		      :labelCol='labelCol'
		      :wrapperCol='wrapperCol'
		      label='签收时间:'
		      >
		      <a-input placeholder='请输入'  v-decorator="['']" />
		    </a-form-item>
		  </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='验收人数:'
              >
              <a-input placeholder='请输入'  v-decorator="['']" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='应收金额:'
              >
              <a-input placeholder='请输入'  v-decorator="['']" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <!-- 活动明细 -->
    <a-divider orientation='left'>产品信息</a-divider>
    <a-button style="margin: 10px 0px 0px 5px;" @click="handleAdd" type="primary">添加产品</a-button>
    <div style='margin-bottom: 10px'></div>
    <a-table
      ref='table'
      size='middle'
      bordered
      rowKey='id'
      :columns='columns'
      :dataSource='dataSource'
      :pagination='ipagination'
      :loading='loading'
      class='Table j-table-force-nowrap'
      @change='handleTableChange'>
      <span slot='action' slot-scope='text, record,index'>
              <a-popconfirm title='确定删除吗?' @confirm='() => handleDelete(index)'>
                      <a>删除</a>
              </a-popconfirm>
            </span>
    </a-table>
    <my-shuttle-modal
      ref="shuttleModal"
      :title="modelname"
      :searchConfig="searclist"
      :columns="columnslist"
      :columns2="columnslist2"
      leftUrl=""
      @chooseOk="chooseOk"
    ></my-shuttle-modal>
    <proChose :name="modelname" ref="prochoose" v-bind='modalProps' @okbro="okbropro"></proChose>
    <orderspModal :name="modelname" ref="orderspModal" v-bind='modalProps' @okbro="okbropro"></orderspModal>
  </j-modal>
</template>

<script>
  import JTreeSelect from '@/components/cn-form/JTreeSelect'
  import orderspModal from './orderspModal.vue'
  import { httpAction, postAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from 'moment'
  import proChose from '@comp/cn-components/ProChose'
  import CnMultiSelectTag from '@/components/dict/CnMultiSelectTag'
  import myShuttleModal from '@/components/cn-components/CnShuttleModal'
  import { PageListMixin } from '@/mixins/PageListMixin'
  import JSelectProduct from '@/components/cn-select-popup/JSelectProduct'
  import JSelectCust from '@/components/cn-select-popup/CnSelectCust'
  import CodeConfigModal from '@/components/cn-select-popup/CodeConfigModal'

  export default {
    name: 'TpmActSpecialModal',
    components: {
      JTreeSelect,
      CnMultiSelectTag,
      JSelectProduct,
      CodeConfigModal,
      JSelectCust,
      proChose,
      myShuttleModal,
      orderspModal
    },
    mixins: [PageListMixin],
    data() {
      return {
        title: '操作',
        visible: false,
        visible1: false,
        model: {},
        modelname:'关联',
        searclist:[],
        columnslist:[],
        columnslist2:[],
        tempUuid: '',
        showterm: false,
        showorg: false,
		form:{
			date1:undefined
		},
        columns1:[
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '车型',
            align: 'center',
            dataIndex: 'cx'
          },
          {
            title: '有效利用体积（立方米）',
            align: 'center',
            dataIndex: 'tj'
          },
          {
            title: '折合件数区间（件）',
            align: 'center',
            dataIndex: 'qj'
          },
        ],
        dataSource1:[
          {
            cx:'4.2米',
            tj:'5-14',
            qj:'200-550'
          },
          {
            cx:'6.8米米',
            tj:'19-23',
            qj:'750-900'
          },
          {
            cx:'7.2米',
            tj:'20-33',
            qj:'800-1300'
          },
          {
            cx:'8.6米',
            tj:'32.5-36.4',
            qj:'1250-1400'
          },
          {
            cx:'9.6米',
            tj:'39-42.9',
            qj:'1500-1650'
          },
          {
            cx:'13.7米',
            tj:'52-59.8',
            qj:'2000-2300'
          }
          , {
            cx:'15米',
            tj:'57.2-70.2',
            qj:'2200-2700'
          }
        ],
        columns: [
          // {
          //   title: '#',
          //   dataIndex: '',
          //   key: 'rowIndex',
          //   width: 60,
          //   align: 'center',
          //   customRender: function(t, r, index) {
          //     return parseInt(index) + 1
          //   }
          // },
          {
            title: '行号',
            align: 'center',
            dataIndex: ''
          },
          {
            title: '类型',
            align: 'center',
            dataIndex: ''
          },
          {
            title: '产品编号',
            align: 'center',
            dataIndex: ''
          },
          {
            title: '产品名称',
            align: 'center',
            dataIndex: ''
          },
          {
            title: '单位',
            align: 'center',
            dataIndex: '',
          },
          {
            title: '单价',
            align: 'center',
            dataIndex: '',
          },
          {
            title: '订单数量',
            align: 'center',
            dataIndex: '',
          },
          {
            title: '发货数量',
            align: 'center',
            dataIndex: '',
          },
          {
            title: '签收数量',
            align: 'center',
            dataIndex: '',
          },
          {
            title: '验证数量',
            align: 'center',
            dataIndex: '',
          }
        ],
        searchConfig:[
          {
            type:'input',
            name:'',
            placeholder:'产品编号',

          },
          {
            type:'input',
            name:'',
            placeholder:'产品名称',
          },

        ],
        columnsModal:[
          {
            title: '产品编号',
            align: 'center',
            dataIndex: ''
          },
          {
            title: '产品名称',
            align: 'center',
            dataIndex: ''
          },
        ],
        columnsModal2:[
          {
            title: '产品编号',
            align: 'center',
            dataIndex: ''
          },
          {
            title: '产品名称',
            align: 'center',
            dataIndex: ''
          },
          {
            title: '操作',
            dataIndex: 'action',
            // fixed: 'right',
            align: 'center',
            scopedSlots: {
              customRender: 'delete'
            }
          }
        ],
        searchConfig:[
          {
            type:'input',
            name:'',
            placeholder:'产品编号',

          },
          {
            type:'input',
            name:'',
            placeholder:'产品名称',
          },

        ],
        columnsModal:[
          {
            title: '产品编号',
            align: 'center',
            dataIndex: ''
          },
          {
            title: '产品名称',
            align: 'center',
            dataIndex: ''
          },
        ],
        columnsModal2:[
          {
            title: '产品编号',
            align: 'center',
            dataIndex: ''
          },
          {
            title: '产品名称',
            align: 'center',
            dataIndex: ''
          },
          {
            title: '操作',
            dataIndex: 'action',
            // fixed: 'right',
            align: 'center',
            scopedSlots: {
              customRender: 'delete'
            }
          }
        ],
        searchConfig1:[
          {
            type:'input',
            name:'',
            placeholder:'商品编号',

          },
          {
            type:'input',
            name:'',
            placeholder:'商品名称',
          },

        ],
        columnsModal1:[
          {
            title: '商品编号',
            align: 'center',
            dataIndex: ''
          },
          {
            title: '商品名称',
            align: 'center',
            dataIndex: ''
          },
        ],
        columnsModal21:[
          {
            title: '商品编号',
            align: 'center',
            dataIndex: ''
          },
          {
            title: '商品名称',
            align: 'center',
            dataIndex: ''
          },
          {
            title: '操作',
            dataIndex: 'action',
            // fixed: 'right',
            align: 'center',
            scopedSlots: {
              customRender: 'delete'
            }
          }
        ],
        searchConfig2:[
          {
            type:'input',
            name:'',
            placeholder:'产品编号',

          },
          {
            type:'input',
            name:'',
            placeholder:'产品名称',
          },
        ],
        columnsModal12:[
          {
            title: '产品编号',
            align: 'center',
            dataIndex: ''
          },
          {
            title: '产品名称',
            align: 'center',
            dataIndex: ''
          },
        ],
        columnsModal22:[
          {
            title: '产品编号',
            align: 'center',
            dataIndex: ''
          },
          {
            title: '产品名称',
            align: 'center',
            dataIndex: ''
          },
          {
            title: '操作',
            dataIndex: 'action',
            // fixed: 'right',
            align: 'center',
            scopedSlots: {
              customRender: 'delete'
            }
          }
        ],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        tabs: {
          activeKey: 'global',
          global: {
            key: 'global',
            columns: [],
            dataSource: []
          }
        },
        dataSource: [],
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {
          input: { rules: [{ required: true, message: '' }] },
          select: { rules: [{ required: true, message: '' }] }
        },
        url: {
          add: window._CONFIG['domianURL'] + '',
          edit: window._CONFIG['domianURL'] + ''
        }
      }
    },
    created() {
    },
    computed: {
      modalProps() {
        return {
          name: this.name
        }
      }
    },
    methods: {
      moment,
      okbropro(val, status, status2) {
        // console.log('数据',val)
        let objs = JSON.parse(JSON.stringify(val[0]))
        console.log('弹出框数据',objs)
        this.form.setFieldsValue({
          customerCode: objs.customerCode,
          customerName: objs.customerName
        })
      },
      handleSelectProduct(e) {
        this.form.setFieldsValue({ 'productName': e[0].productName })
      },
      handleSelectCode() {
        this.$refs.CodeConfigModal.showModal(4)
      },
      add() {
        this.edit({})
      },
      edit(record) {
        this.form.resetFields()
        this.model = Object.assign({}, record)
        if (this.model.id) {
          this.dataSource = this.model.actTermVos || []
        }
        this.visible = true
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, Object.keys(this.model)))
          //时间格式化
        })

      },
      handleAdd(){
        this.modelname='选择产品'
        this.searclist=this.searchConfig
        this.columnslist=this.columnsModal
        this.columnslist=this.columnsModal2
        this.$refs.shuttleModal.visible=true

      },
      handleAdd1(){
        this.modelname='收藏商品'
        this.searclist=this.searchConfig1
        this.columnslist=this.columnsModal1
        this.columnslist=this.columnsModal21
        this.$refs.shuttleModal.visible=true
      },
      handleAdd2(){
        this.modelname='常购清单'
        this.searclist=this.searchConfig2
        this.columnslist=this.columnsModal21
        this.columnslist=this.columnsModal22
        this.$refs.shuttleModal.visible=true
      },
      close() {
        this.$emit('close')
        this.dataSource = []
        this.visible = false
      },
      handleOk1(){
        this.visible1=false
      },
      showModal(){
        this.visible1=true
      },
      handleOk() {
        const that = this
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            let httpurl = ''
            let method = ''
            httpurl += this.url.add
            method = 'post'
            let formData = Object.assign(this.model, values)
            //时间格式化
            let tmpdate = formData.actStart
            formData.actTermVos = this.dataSource
            that.confirmLoading = true
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })
          }
        })
      },
      handleCancel() {
        this.close()
        this.showterm = false
      },
      changeTerm(val) {
        if (val != undefined) {
          if (val === '' || val === '0') {
            this.showterm = false
            this.showorg = true
          } else {
            this.showterm = true
            this.showorg = false
          }
        }
      },
      custSearch(status) {
        this.modelname='经销商'
        // console.log('数据',status)
        this.$refs.prochoose.rowKey='id'
        let formconfig = [
          {
            key: 'customerCode',
            label: '经销商编号'
          },
          {
            key: 'customerName',
            label: '经销商名称'
          }
        ]
        let tableconfig = {
          columns: [
            {
              title: '经销商编号',
              align: 'center',
              dataIndex: 'customerCode',
              width: 120,
              ellipsis: true
            },
            {
              title: '经销商名称',
              align: 'center',
              dataIndex: 'customerName',
              width: 120,
              ellipsis: true
            }
          ],
          list: window._CONFIG['domianURL'] + '/customer/cnCustomer/findPageList',
          multiple: false,
          columW: 8
        }

        let dataSource = []
        if(this.form.getFieldValue('superiorUser')){
          dataSource = [{
            userName: this.form.getFieldValue('superiorUser'),
            realName: this.form.getFieldValue('realName')
          }]
        }
        this.name = '经销商'
        this.$refs.prochoose.edit(formconfig, tableconfig,'superiorUser', 'realsname',dataSource)
      },
      custSearch1(status) {
        this.modelname='添加货补商品'
        // console.log('数据',status)
        this.$refs.orderspModal.rowKey='id'
        let formconfig = [
          {
            key: '',
            label: '产品组名称'
          },
          {
            key: '',
            label: '商品编号'
          },
          {
            key: '',
            label: '商品名称'
          }
        ]
        let tableconfig = {
          columns: [
            {
              title: '产品组编号',
              align: 'center',
              dataIndex: '',
              ellipsis: true
            },
            {
              title: '产品组名称',
              align: 'center',
              dataIndex: '',
              ellipsis: true
            },
            {
              title: '商品编号',
              align: 'center',
              dataIndex: '',
              ellipsis: true
            },
            {
              title: '商品名称',
              align: 'center',
              dataIndex: '',
              ellipsis: true
            },
            {
              title: '可用余额（元）',
              align: 'center',
              dataIndex: '',
              ellipsis: true
            },
            {
              title: '数量',
              align: 'center',
              dataIndex: '',
              ellipsis: true
            },
            {
              title: '合计',
              align: 'center',
              dataIndex: '',
              ellipsis: true
            }
          ],
          list: '',
          multiple: false,
          columW: 8
        }

        let dataSource = []
        if(this.form.getFieldValue('superiorUser')){
          dataSource = [{
            userName: this.form.getFieldValue('superiorUser'),
            realName: this.form.getFieldValue('realName')
          }]
        }
        this.$refs.orderspModal.edit(formconfig, tableconfig,'superiorUser', 'realsname',dataSource)
      },
      custSearch2(status) {
        this.modelname='添加赠品'
        // console.log('数据',status)
        this.$refs.orderspModal.rowKey='id'
        let formconfig = [
          {
            key: '',
            label: '产品组名称'
          },
          {
            key: '',
            label: '赠品编号'
          },
          {
            key: '',
            label: '赠品名称'
          }
        ]
        let tableconfig = {
          columns: [
            {
              title: '产品组编号',
              align: 'center',
              dataIndex: '',
              ellipsis: true
            },
            {
              title: '产品组名称',
              align: 'center',
              dataIndex: '',
              ellipsis: true
            },
            {
              title: '赠品编号',
              align: 'center',
              dataIndex: '',
              ellipsis: true
            },
            {
              title: '赠品名称',
              align: 'center',
              dataIndex: '',
              ellipsis: true
            },
            {
              title: '可用余额（元）',
              align: 'center',
              dataIndex: '',
              ellipsis: true
            },
            {
              title: '数量',
              align: 'center',
              dataIndex: '',
              ellipsis: true
            },
            {
              title: '合计',
              align: 'center',
              dataIndex: '',
              ellipsis: true
            }
          ],
          list:'',
          multiple: false,
          columW: 8
        }

        let dataSource = []
        if(this.form.getFieldValue('superiorUser')){
          dataSource = [{
            userName: this.form.getFieldValue('superiorUser'),
            realName: this.form.getFieldValue('realName')
          }]
        }
        this.$refs.orderspModal.edit(formconfig, tableconfig,'superiorUser', 'realsname',dataSource)
      },
      handleSelectTerm(list) {
        this.dataSource = list
      },
      handleDelete(index) {
        this.dataSource.splice(index, 1)
      }
    }
  }
</script>

<style lang='less' scoped>
  /deep/ .ant-modal-body {
    padding-top: 0 !important;
  }

  .ant-calendar-picker, .ant-input-number {
    width: 100% !important;
  }
</style>